// 富文本编辑器配置
function initRichTextEditor(elementId, initialContent) {
    // 这里是模拟富文本编辑器的初始化
    // 实际项目中可以使用成熟的富文本编辑器库如TinyMCE、CKEditor等
    
    const textarea = document.getElementById(elementId);
    
    if (!textarea) {
        console.error(`元素 ${elementId} 不存在`);
        return;
    }
    
    // 设置初始内容
    if (initialContent) {
        textarea.value = initialContent;
    }
    
    // 添加简单的富文本工具栏
    // 实际应用中应该使用完整的富文本编辑器
    const toolbarHTML = `
    <div class="rich-text-toolbar" style="border: 1px solid #ddd; padding: 10px; margin-bottom: 5px; background-color: #f8f9fa;">
        <button class="toolbar-btn" data-command="bold" title="加粗">
            <strong>B</strong>
        </button>
        <button class="toolbar-btn" data-command="italic" title="斜体">
            <em>I</em>
        </button>
        <button class="toolbar-btn" data-command="underline" title="下划线">
            <u>U</u>
        </button>
        <button class="toolbar-btn" data-command="insertunorderedlist" title="无序列表">
            • 列表
        </button>
        <button class="toolbar-btn" data-command="insertorderedlist" title="有序列表">
            1. 列表
        </button>
        <button class="toolbar-btn" data-command="createlink" title="插入链接">
            🔗 链接
        </button>
        <button class="toolbar-btn" data-command="insertimage" title="插入图片">
            📷 图片
        </button>
        <button class="toolbar-btn" data-command="formatblock" data-value="<h2>" title="标题">
            H2
        </button>
        <button class="toolbar-btn" data-command="formatblock" data-value="<p>" title="段落">
            P
        </button>
        <div style="display: inline-block; width: 1px; height: 20px; background-color: #ddd; margin: 0 10px;"></div>
        <button class="toolbar-btn" data-command="undo" title="撤销">
            ↶ 撤销
        </button>
        <button class="toolbar-btn" data-command="redo" title="重做">
            ↷ 重做
        </button>
        <button class="toolbar-btn" data-command="clear" title="清空">
            🗑️ 清空
        </button>
    </div>
    `;
    
    const containerHTML = `
    <div class="rich-text-container" style="border: 1px solid #ddd; border-radius: 4px;">
        ${toolbarHTML}
        <div id="${elementId}-editor" contenteditable="true" style="min-height: 200px; padding: 10px;"></div>
        <textarea id="${elementId}-hidden" name="${elementId}" style="display: none;"></textarea>
    </div>
    `;
    
    // 替换原有的textarea
    const parent = textarea.parentNode;
    const placeholder = document.createElement('div');
    placeholder.id = `${elementId}-placeholder`;
    parent.insertBefore(placeholder, textarea);
    textarea.style.display = 'none';
    
    placeholder.innerHTML = containerHTML;
    
    // 获取编辑器元素
    const editor = document.getElementById(`${elementId}-editor`);
    const hiddenTextarea = document.getElementById(`${elementId}-hidden`);
    
    // 设置编辑器的初始内容
    if (initialContent) {
        editor.innerHTML = initialContent;
    }
    
    // 添加工具栏按钮点击事件
    const toolbarButtons = document.querySelectorAll('.toolbar-btn');
    toolbarButtons.forEach(button => {
        button.style.border = '1px solid #ddd';
        button.style.borderRadius = '3px';
        button.style.padding = '4px 8px';
        button.style.margin = '0 4px';
        button.style.backgroundColor = '#fff';
        button.style.cursor = 'pointer';
        button.style.fontSize = '14px';
        button.style.outline = 'none';
        
        button.addEventListener('click', function() {
            const command = this.getAttribute('data-command');
            const value = this.getAttribute('data-value');
            
            // 保存当前选区状态
            saveSelection();
            
            try {
                if (command === 'clear') {
                    // 清空编辑器
                    editor.innerHTML = '';
                } else if (command === 'createlink') {
                    // 插入链接
                    const url = prompt('请输入链接地址：');
                    if (url) {
                        document.execCommand(command, false, url);
                    }
                } else if (command === 'insertimage') {
                    // 插入图片
                    const url = prompt('请输入图片地址：');
                    if (url) {
                        document.execCommand(command, false, url);
                    }
                } else {
                    document.execCommand(command, false, value);
                }
            } catch (error) {
                console.error('执行命令失败：', error);
            }
            
            // 恢复选区状态
            restoreSelection();
            
            // 触发编辑器内容更新
            onContentChange();
        });
    });
    
    // 编辑器内容变更时的处理函数
    function onContentChange() {
        // 同步内容到隐藏的textarea
        hiddenTextarea.value = editor.innerHTML;
        
        // 触发自定义事件
        const event = new CustomEvent('rich-text-content-change', {
            detail: {
                content: editor.innerHTML
            }
        });
        document.dispatchEvent(event);
    }
    
    // 添加内容变更监听
    editor.addEventListener('input', onContentChange);
    editor.addEventListener('DOMSubtreeModified', onContentChange);
    
    // 保存和恢复选区状态的函数
    let savedRange = null;
    
    function saveSelection() {
        if (window.getSelection) {
            const selection = window.getSelection();
            if (selection.rangeCount > 0) {
                savedRange = selection.getRangeAt(0);
            }
        }
    }
    
    function restoreSelection() {
        if (savedRange && window.getSelection) {
            const selection = window.getSelection();
            selection.removeAllRanges();
            selection.addRange(savedRange);
            editor.focus();
        }
    }
    
    // 表单提交时同步内容
    const form = parent.closest('form');
    if (form) {
        form.addEventListener('submit', function() {
            onContentChange();
        });
    }
    
    // 返回编辑器对象，以便外部可以操作
    return {
        getContent: function() {
            return editor.innerHTML;
        },
        setContent: function(content) {
            editor.innerHTML = content;
            onContentChange();
        },
        focus: function() {
            editor.focus();
        },
        blur: function() {
            editor.blur();
        }
    };
}